<template>
  <div class="dashboard">
    <!-- 头部 -->
    <header class="header">
      <h1>东软环保公众监督平台管理系统</h1>
      <div class="user-info">
        <span>系统管理员:   {{ adminName }}</span>
        <el-button type="danger" @click="logout">退出</el-button>
      </div>
    </header>
	 <el-container>
	    <!-- 侧边栏 -->
		
      <el-aside width="200px">
					<el-menu
	              background-color="#80bfff"
	              text-color="#fff"
	              active-text-color="#ffd04b"
				  @select="handleMenuSelect">
	              <el-sub-menu index="1">
	                <template #title >
						<el-icon><ChatDotRound /></el-icon>
	                  <span >公众监督数据管理</span>
	                </template>
	                <el-menu-item-group >
	                  <el-menu-item index="/administrator/AdministerPublicLIst">公众监督数据列表</el-menu-item>
	                  <el-menu-item index="/administrator/AdministerConfirmAqi">确认AQI实测数据</el-menu-item>
	                </el-menu-item-group>
	              </el-sub-menu>
	              <el-sub-menu index="2">
	                <template #title>
	                  <el-icon><DocumentCopy /></el-icon>
	                  <span>统计数据管理</span>
	                </template>
	                <el-menu-item-group >
	                  <el-menu-item index="/administrator/AdministratorProvinceCheck">省分组检查统计</el-menu-item>
	                  <el-menu-item index="/administrator/AdministratorAqiDistribution">AQI指数分布统计</el-menu-item>
	              	<el-menu-item index="/administrator/AdministratorAqiTrend">AQl指数趋势统计</el-menu-item>
	              		<el-menu-item index="/administrator/AdministratorOtherStats">其它数据统计</el-menu-item>
	                </el-menu-item-group>
	              </el-sub-menu>
				  </el-menu>

	          </el-aside>

	    <!-- 右侧内容主体 -->
	    <el-main >	
		<router-view></router-view>
		</el-main>
	</el-container>
    <!-- 底部 -->
    <footer class="footer">
      <p>版权所有：东软睿道</p>
    </footer>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
onMounted(()=>{

})
// 初始化管理员信息和菜单数据
const router = useRouter();

let admin = JSON.parse(sessionStorage.getItem('admin'))


let adminName
    if(admin!=null){
      adminName = ref(admin.adminCode);
    }else {
      adminName = ref('未登录')
    }
// if(adminName == null){
//   router.push('/admin/login')
// }
if(admin == null){
  router.push('/admin/login')
}
if (router.currentRoute.value.path === '/admin/index' && admin!= null) {
  router.push('/administrator/AdministerPicture');
}
// 处理菜单项点击事件
const handleMenuSelect = (index) => {
  router.push(index);
};

// 退出登录
const logout = () => {
  // 实现退出逻辑，比如清除本地存储的登录信息等
  router.push('/admin/login')
  sessionStorage.clear()
  ElMessage.success('退出成功');
};
</script>

<style scoped>
	
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #409eff;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
}
 .el-aside{
     background-color: #80bfff;
 }

.left{
	width: 200px;
	background-color: #80bfff;
}

aside.sidebar {
  width: 200px;               /* 设置侧边栏的宽度为200像素 */
  background-color: #80bfff;  /* 设置侧边栏的背景颜色为浅蓝色 */
  border-right: 1px solid #ebeef5;  /* 设置侧边栏右侧的边框为1像素宽度的实线，颜色为浅灰色 */
}

.sidebar .el-menu-item-group {
  background-color: #80bfff;
}
aside.sidebar .el-menu {
  background-color: transparent;  /* 让 el-menu 的背景色透明，以显示侧边栏的背景色 */
}

.el-main {
  flex: 1;
  padding: 20px;
  overflow: auto;
  }
img {
  width: 45%; /* 让图片宽度撑满容器 */
  height: auto; /* 高度自动缩放以保持图片比例 */
  display: block; /* 避免图片下方出现额外的空间 */
  margin: 10px auto; /* 中心化图片 */
}

.footer {
  padding: 10px 20px;
  text-align: center;
  background-color: #409eff;
}
</style>
